<script setup lang="ts">
import useAuthStore from '@/content/stores/auth'

const authStore = useAuthStore()

function onLogout(type: number) {
  if (type === 1) {
    authStore.deleteToken()
    window.location.href = '/'
  }
}
</script>

<template>
  <ElDropdown
    class="setting"
    @command="onLogout"
  >
    <div class="flex items-center gap-4px outline-none">
      <span>{{ authStore.username }}</span>
      <ElIcon>
        <ArrowDown />
      </ElIcon>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem :command="1">
          <ElIcon><SwitchButton /></ElIcon>
          <span>退出登录</span>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="less" scoped>
.setting {
  position: absolute;
  right: 12px;
  top: 24px;
}
</style>
